<template>
  <div
    class="content-wrapper"
    v-loading.fullscreen.lock="fullscreenLoading"
    :before-close="handleClose"
  >
    <el-row class="content-row">
      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px">
        <el-row>
          <el-col :span="20">
            <el-form-item v-if="parent && Object.keys(parent).length > 0" label="评论：" prop="">
              {{parent.content}}
            </el-form-item>
            <el-form-item label="评论人" prop="userName">
              <el-input v-model="addForm.userName" placeholder="请输入评论人名称"></el-input>
            </el-form-item>
            <el-form-item label="评论内容" prop="content">
              <el-input
                type="textarea"
                rows="8"
                maxlength="200"
                v-model="addForm.content"
                placeholder="最过不超过200字，不支持特殊符号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeTab">取 消</el-button>
      <el-button type="primary" @click="saveForm('addForm')">保存</el-button>
    </div>


  </div>
</template>

<script>

import { addComment } from "../../../../api/bbs/comment";

export default {
  name: "postAdd",
  props:{
    postId:{
      type: String,
      required: false
    },
    parent:{
      type: Object,
      required: false
    },
    comment:{
      type: Object,
      required: false
    }
  },
  data() {
    return {
      fullscreenLoading: false,
      addForm: {
        userName: '',
        content: '',
        postId:'',
      },
      addRules: {
        userName: [
          {
            required: true,
            message: "请输入评论人名称",
            trigger: ["blur", "change"]
          }
        ],
        content: [
          {
            required: true,
            message: "请输入评论内容",
            trigger: ["blur", "change"]
          }
        ],
      }
    };
  },
  created(){
    this.pageInit();
  },
  watch: {
    comment(val){
      this.pageInit();
    }
  },
  components: {
    
  },
  methods: {
    pageInit(){
      this.addForm = {};
      this.addForm = this.comment;
    },
    closeTab() {
      this.$emit("handleClose");
    },
  
    saveForm(formName, status) {
      let that = this;
      console.log("that subjectId ===>",that.subjectId)
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.fullscreenLoading = true;
          that.addForm.postId = that.postId;
          if(that.parent && Object.keys(that.parent).length > 0){
            that.addForm.parentId = that.parent.id;
          }
          addComment(that.addForm).then(res => {
            if (res.code == "0") {
              that.$message({ message: "新增成功", type: "success" });
              that.resetForm("addForm");
              that.$emit("saveClose");
            } else {
              that.$message({ message: res.data.msg, type: "error" });
            }
            that.fullscreenLoading = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style >
.content-wrapper {
  height: 100%;
  overflow-y: scroll;
}

.content-row {
  height: 94%;
  overflow-y: scroll;
}

.imageFloatLeft {
  width: 40%;
  float: left;
  height: 140px;
  margin-right: 2%;
}

.dialog-footer {
  text-align: center;
}


</style>
